<template>
	
	<view class="container">
		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<view class="mp-search-box">
		<view class="caty-caith" @click="navTo('/pages/product/product')">
		<text class="caty-terst"  @click="navTo('/pages/product/product')" v-if="city">{{city.city}}</text>
		<text class="caty-terst" @click="navTo('/pages/product/product')" v-else>{{region.city}}</text>
		<van-icon name="arrow-down" @click="navTo('/pages/product/product')"/>
		</view>
			<input class="ser-input" v-model="value" @click="navTo('/pages/index/search')" type="text" value="输入关键字搜索" disabled />
		</view>
		<!-- #endif --> 
		
		<!-- 头部轮播 -->
		<view class="carousel-section">
		<swiper 
		    class="home-swiper"
			indicator-dots="true" 
			autoplay="true" 
			circular="true"
		    interval="3000"
		    duration="1000"
		    indicator-color="#bfbfbf" 
		    indicator-active-color="#00ACED"
		  >
		    <block v-for="(item,index) in carouselList" :key="index" >
		      <swiper-item class="titleNview-placing">
		        <image class="supeng" @click="open(item)" :src="item.bannerUrl" style="width: 100%;height: 100%;"></image>
		      </swiper-item>
		    </block>
		  </swiper>
		  </view>
		<!-- 分类 -->
		<u-scroll-list class="cate-section">
			<view class="cate-item" @click="navTo('/pages/components/hover')">
				<image class="caty-imang" src="/static/temp/c4.png"></image>
				<text style="color: #1d1d1d; font-weight: 500;font-size: 24rpx;">装修知识</text>
			</view>
			<view class="cate-item" @click="navTo('/package/classic/classic')">
				<image class="caty-imang" src="/static/temp/c5.png"></image>
				<text style="color: #1d1d1d; font-weight: 500;font-size: 24rpx;">经典案例</text>
			</view>
			<view class="cate-item" @click="navTo('/pages/fitment/fitment')">
				<image class="caty-imang" src="/static/temp/c6.png"></image>
				<text style="color: #1d1d1d; font-weight: 500;font-size: 24rpx;">装修避坑</text>
			</view>
			<view class="cate-item" @click="navTo('/package/fitment/budget')">
				<image class="caty-imang" src="/static/temp/c7.png"></image>
				<text style="color: #1d1d1d; font-weight: 500;font-size: 24rpx;">装修预算</text>
			</view>
			<view class="cate-item" @click="navTo('/package/commodity/auxiliary?type=c1')">
				<image class="caty-imang" src="/static/temp/c8.png"></image>
				<text style="color: #1d1d1d; font-weight: 500;font-size: 24rpx;">基础辅材</text>
			</view>
			<view class="cate-item" @click="navTo('/package/commodity/familylife?type=c2')">
				<image class="caty-imang" src="/static/temp/c9.png"></image>
				<text style="color: #1d1d1d; font-weight: 500;font-size: 24rpx;">品牌主材</text>
			</view>
			<view class="cate-item" @click="navTo('/package/commodity/familylife?type=c3')">
				<image class="caty-imang" src="/static/temp/c10.png"></image>
				<text style="color: #1d1d1d; font-weight: 500;font-size: 24rpx;">生活家具</text>
			</view>
		</u-scroll-list>
		 
		<!-- tab栏切换 -->
		<view :class="scrollTop > 390 ? 'fixed ' : 'asd'">
    <van-tabs active="null" @click="aaa" class="acbuemd" swipeable animated>
	  <van-tab class="aada" title="推荐" :name="null"></van-tab>
	  <van-tab title="管家监理" name="MANGER"></van-tab>
	  <van-tab title="设计师" name="DESIGN"></van-tab>	
	  <van-tab title="装修工匠" name="WOOD_WORKER">
		
		  <u-tabs :list="list4" @click="onchion" :current='0'
		    :activeStyle="{ 
		          color: '#000',
				  padding:'10rpx 20rpx',
				  radius: '25px',
				  background:'#FFD7CA',
		          fontWeight: 'bold',
		          transform: 'scale(1.05)'
		      }"
		      :inactiveStyle="{
		          color: '#717375',
				  padding:'10rpx 20rpx',
				   background:'#eeeeee',
		          transform: 'scale(1)'
		      }">
		  		 </u-tabs>
				 
	  </van-tab>
	  <van-tab title="品牌主材商" name="T1"></van-tab>
	  <van-tab title="安装与维修" name="INSTALL_CHANGE"></van-tab>
	  <van-tab title="家政保洁" name="HOUSE_KEEP_CLEAR"></van-tab> 
	</van-tabs>
		</view>
		<!-- 空白页 -->	 
		<view class="empty" v-if="goodsList.length==0">
			<image src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/cltynull.png" mode="aspectFit"></image>
			<view class="empty-tips">
				这里什么都没有噢~~
			</view>
		</view>
		<!-- 列表 -->
       <view class="cate-liket" v-else>
		   <scroll-view id="scrollContainer" @scroll="handleScroll" scroll-y>
		   <grid-view type="masonry" :cross-axis-count="2" :main-axis-gap="15" :cross-axis-gap="15" style="width: 100%;">
        	<view class="cate-rietyon" v-for="(item,index) in goodsList" :key="item.articleInfoResp.articleId" >
				 <!-- 图文 -->
				<view v-if="goodsList[index].articleInfoResp.detailType == 'Json'" @click="loaddocen(item)">
				<img class="cate-comig"
				 :src="goodsList[index].articleInfoResp.images[0]" mode='widthFix' alt="">
				 </view>
				 <!-- 视频 -->
				 <view v-else @click="loaddocen(item)">
				 <img class="cate-comig"  :src="goodsList[index].articleInfoResp.extendData.thumbnailUrl">
				 <view class="cate-opemak">
				 <van-icon name="play" />
				 </view>
				
				 </view>

				<span class="cate-conspan" @click="loaddocen(item)">{{goodsList[index].articleInfoResp.title}}</span>
				<view> 
				    <img class="cate-image" @click="actione(item)" v-show="goodsList[index].simpleUserInfoResp.avatar != null" :src="goodsList[index].simpleUserInfoResp.avatar" alt="">
					<img class="cate-image" @click="actione(item)" v-show="goodsList[index].simpleUserInfoResp.avatar == null" src="@/static/missing-face.png" alt="">
					<test class="cate-clogion" @click="loaddocen(item)">{{goodsList[index].simpleUserInfoResp.nick}}</test>
					 <van-icon class="cate-icon" name="star-o" size="18" color="#9a9a9a" v-if="goodsList[index].articleInfoResp.favoritesFlag == false"  @click="aaaa(item)"/>
					 <van-icon class="cate-icon" name="star" size="18" v-else color="#ff7144"  @click="aaaa(item)"/>
					 <span class="cate-spanon">{{goodsList[index].articleInfoResp.favorites}}</span>
				</view>
			</view> 
			</grid-view>
			</scroll-view>
			<van-loading class="actoue" v-show="siopen" size="24px" type="spinner">加载中...</van-loading> 
        </view>
		
	</view>
</template>

<script>
	import Api from '../../http/api.js'
	import user from '@/http/user.js'
	import amapFile from '@/employees/amap-wx.js'
	import { mapState } from 'vuex';  
	export default {   
		data() {
			return {
				hasLogin:'',
				bgcing:'https://s1.ax1x.com/2023/05/27/p9qqb79.png',
				list4: [{
				     name: '木工',
					 value:'WOOD_WORKER'
				   }, {
				       name: '瓦工',
					   value:'TILE_WORKER'
				   }, {
				       name: '水电工',
					   value:'PLUMBER_WORKER'
				   }, {
				       name: '油漆工',
					   value:'PAINTER_WORKER',
				   }, {
				       name: '拆除杂工',
					   value:'DEMOLITION_WORKER'
				   }],
				  
				value:'',
				city:{},
				siopen:false,
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				goodsList: [],
				info:{
					cancel:"",
					articleId:''
				},
				q:{
					size:Number,
					index:1,
					type:null
				},
				scrollTop:null,
			   a:10,
			   region:{
			   	province:'',
			   	city:'',
			   	county:''
			   }
			};
		},

		onLoad() {
			this.aacth()
			this.loadData();
			this.cityret();
			// 轮播图
			this.calleyrt();
		
		},
		// 下拉刷新
		onPullDownRefresh(){
			this.loadData();
			this.cityret()
		},
         //滚动条监听
       onPageScroll: function (e) {
          this.scrollTop = e.scrollTop
         },
		//加载更多
		onReachBottom:function(){
			const that = this;
			this.siopen = true
			this.q.size = this.q.size+20
			this.a = this.q.size
			setTimeout(async()=>{
			this.loadData()
			that.siopen = false
			},1000)
		},
	 //   computed: {
		// ...mapState(['hasLogin','token'])
	 //    },
	
	   onShow() {
	   	this.cityret()
		this.aacth()
	   },
		
		methods: {
			aacth(){
				this.hasLogin = uni.getStorageSync('token') || '';
			},
			
			/*
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async loadData() {
				this.q.size = this.a
			   let res = await Api.article(this.q)
			   this.goodsList = res.data.data
			}, 
			// 轮播图
			async calleyrt(){
				const asd = await Api.xslideshow()
				this.carouselList = asd.data
			},
             // 定位地区
			 cityret(){
				 let thst = this
				 wx.getLocation({
				      type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标  
				      success (res) {
				        var longitude = res.longitude
				        var latitude = res.latitude
				        thst.loadCity(longitude, latitude)
				      },
			            })
				 this.city = wx.getStorageSync('city')
			 },
			 // 传入获取到的经纬度，拿到当前定位的城市
			 loadCity(longitude, latitude){
			 	let thst = this
			 	 var myAmapFun = new amapFile.AMapWX({key:'4e2152ee536b42f59133ffc4ab34f246'});
			 	    myAmapFun.getRegeo({
			 	      success(data){
			 	        //成功回调
			 			thst.region.city = data[0].regeocodeData.addressComponent.city
			 			thst.region.province = data[0].regeocodeData.addressComponent.province 
						wx.setStorage({
							key:'chateh',
							data:thst.region
						})
			 	      },
			 		  })
			 	    },
			// 跳转文章详情
			loaddocen(item){
				if(!this.hasLogin){
					uni.navigateTo({
					url: '/pages/public/login',
					 })
				} else{
				if(item.articleInfoResp.detailType == "Video"){
						uni.navigateTo({
						url: `/package/detail/video?id=${item.articleInfoResp.articleId}&user=${item.simpleUserInfoResp.userId}`,
						 })     
				}else{
					 uni.navigateTo({
					 	url: `/package/detail/detail?id=${item.articleInfoResp.articleId}&user=${item.simpleUserInfoResp.userId}`,
					 })
				// var model = JSON.stringify(item);
						}
					}
			},
			// 跳转用户详细资料
			async actione(item){
				const res = await user.userinfo({'userId':item.simpleUserInfoResp.userId})
				if(res.data == null){
				 uni.navigateTo({
					url: `/pages/components/information?id=`+item.simpleUserInfoResp.userId,
					})
				} else{
					uni.navigateTo({
					  url: `/pages/components/authentication?id=`+item.simpleUserInfoResp.userId,
					  })
				}
			},
			// 跳转页面 
			navTo(url){
				if(!this.hasLogin){
					url = '/pages/public/login';
				}
				uni.navigateTo({  
					url
				})  
			},
			// 头部轮播
		open(item){
			uni.navigateTo({
				url: `/pages/jump/jump?link=`+item.link,
			})
		},
		aaa(event){
			this.q.type = event.detail.name
			this.loadData()
		},
		onchion(index){
			
			this.q.type = index.value
			this.loadData()
		},
		// 收藏
		async aaaa(item){
			this.info.articleId = item.articleInfoResp.articleId
			this.info.cancel = item.articleInfoResp.favoritesFlag
			const ress = await Api.collect(this.info)
         	this.loadData()
		},
		},

	}
</script>
	
<style lang="scss">
	/* #ifdef MP */
	.mp-search-box{
		position:absolute;
		left: 0;
		top: 60upx;
		z-index: 999;
		width: 100%;
		padding: 0 80upx;
		background-color: linear-gradient(180deg, #FCEEE6 0%, rgba(220,218,216,0.29) 20%, #F1F1F1 100%);
		.ser-input{
			flex:1;
			height: 56upx;
			line-height: 56upx;
			width: 75%;
			float: right;
			text-align: center;
			font-size: 28upx;
			color:$font-color-base;
			border-top-right-radius: 20px;
			border-bottom-right-radius: 20px;
			background: rgba(255,255,255,.6);
	}
	}
	.home-swiper{
		height: 270px;
	}
	.caty-caith{
		display: inline-block;
		height: 56rpx;
		position: absolute;
		text-align: center;
		background:rgba(255,255,255,.6);
		border-top-left-radius: 20px;
		border-bottom-left-radius:20px;
		padding-top: 13rpx;
		margin-left: 6rpx;
		color: #000;
		font-size: 24rpx;
		border-right: 2rpx solid #818080;
		z-index: 9999;
		.caty-terst{
			
			display: inline-block;
			margin-left: 19rpx;
			width: 95rpx;
			height: 17px;
			overflow: hidden;
			text-overflow: ellipsis;
			    white-space: nowrap;
		}
		.van-icon{
			margin-right: 10rpx !important;
			transform: translateY(-20%) !important;
		}
	}
	page{
		.cate-section{
			position:relative;
			z-index:5;
			border-radius:16upx 16upx 0 0;
		}
		.caty-imang{
			width: 100upx;
			height: 100upx;
			margin-top: 20rpx; 
			margin-right: 52rpx;
		}
		.u-scroll-list__scroll-view__content{  
			margin-left: 15rpx;
		}
		.u-scroll-list__indicator__line__bar{
			background-color: #ff7144 !important;
		}
		.carousel-section{
			padding: 0;
			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}
			.carousel{
				.carousel-item{
					padding: 0;
				} 
			}
			.swiper-dots{
				left:45upx;
				bottom:40upx;
			}
		}

	}

	/* #endif */

	page {
		background: #f5f5f5;
	}
	.m-t{
		margin-top: 16upx;
	}
	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426upx;
			transition: .4s;
		}
	}
	.carousel {
		width: 100%;
		height: 350upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 28upx;
			overflow: hidden;
		}

		image {
			width: 100%; 
			height: 100%;
			border-radius: 10upx;
		}
	}
	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}
	/* 分类 */
	.u-scroll-list{
		background-color: #fff;
	}
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		padding: 30upx 22upx; 
		background: #fff;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
		}
	
	}
	.ad-1{
		width: 100%;
		height: 210upx;
		padding: 10upx 0;
		background: #fff;
		image{
			width:100%;
			height: 100%; 
		}
	}
	
.supeng{
	width: 100%;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
// 文章列表
.cate-liket{
	width: 100%;
	word-break: break-all;
	white-space: pre-wrap;
	font-weight: 400;
	font-size: 28rpx;
	margin-bottom: 12rpx;
	// 默认单行，如果需要瀑布流则改成多行
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 20rpx;

	.cate-rietyon{	
		width: 100%;
		height: auto;
		break-inside: avoid;
		background-color: #FFFFFF;
		border-radius: 20rpx !important;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		break-inside: avoid;
	}
	.cate-comig{
		width: 100%;
		border-top-left-radius:20rpx;
		border-top-right-radius:20rpx;
	}
	.cate-conspan{
		display: -webkit-box;
	
	    color: #1d1d1d;
		font-size: 24rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
		line-height: 28rpx;
		font-weight: 500;
		overflow:hidden;
		-webkit-line-clamp: 2; /* 能够显示的最大行数 */
	    -webkit-box-orient: vertical; 
	}
	.cate-image{
		height: 45rpx;
		width: 45rpx;
		border-radius: 50%;
	    margin-left: 20rpx;
	}
	
}

.cate-clogion{
	    display: inline-flex;
	    width: 150rpx;
		font-size: 24rpx;
		transform: translateY(-30%);
		margin-left: 10rpx;
		color: #A8A8A8;
		
	}
.cate-opemak{
	background-color: rgba(0, 0, 0, 0.3);
	width: 35rpx;
	height: 35rpx;
	border-radius: 50%;
	z-index: 800;
	position: relative;
	left: 280rpx;
	bottom: 450rpx;
}
.van-icon{
	position: relative;
	bottom: 3rpx;
}
// tab栏下划线
.van-sticky{
.van-tabs__line{
	background-color: rgba(0, 0, 0, 0) !important;
	background-image: url("/static/temp/tabch.png") !important;
	margin-bottom: 10upx !important;
    width: 9.5% !important;
	height: 23% !important;
}
}
.u-tabs__wrapper__nav__line{
	width: 30px !important;
	height: 10px !important;
}
   
.van-tab{
	font-size: 28rpx;
	font-weight: 400;
	color: #939393;
	flex-basis:23% !important;
}
.van-tab--active{
	font-weight: 700 !important;
	font-size: 32rpx !important;
	color: #1d1d1d !important;
	flex-basis:27% !important;
}
.cate-icon{
	transform: translateX(25rpx);
}
.cate-spanon{
	display: inline-block;
	transform: translateX(25rpx);
	font-weight: 500 !important;
	font-size: 24rpx;
	color: #8a8a8a;
}
// 加载
.actoue{
	margin-left: 45%; 
}
		.fixed {
		  position: fixed;
		  top: 0;
		  z-index: 999;
		  background-color: #fff;
		}
		.asd{
		  background-color: #fff; 
		  }
		.van-tabs__nav--line{
			height: 48px !important;
		}
				
		// 二级tabs栏
		.u-tabs__wrapper__nav__item__text{
			font-size: 24rpx !important;
			border-radius: 50rpx;
		}
		// 下划线
		.u-tabs__wrapper__nav__line{
			display: none !important;
		}
		
		// 空白页
			.empty{
					
				overflow: none;
			
				width: 100%;
				height: 100vh;
				padding-bottom:100upx;
				display:flex;
				justify-content: center;
				flex-direction: column;
				align-items:center;
				background: #fff;
				image{
					width: 240upx;
					height: 160upx;
					margin-bottom:30upx;
				}
				.empty-tips{
					display:flex;
					font-size: $font-sm+2upx;
					color: $font-color-disabled;
					.navigator{
						color: $uni-color-primary;
						margin-left: 16upx;
					}
					}
					}
					
</style>
